<template>
  <div class="app">
    <h2>我是app组件</h2>
    <h2>count的值{{ count }}</h2>
    <button @click="add">+1</button>
  </div>
</template>

<script>
/*
 ref():定义简单类型的数据(也可以定义复杂的数据)
  ref函数接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value
详细信息:
    ref 对象是可更改的，也就是说你可以为 .value 赋予新的值。它也是响应式的，即所有对 .value 的操作都将被追踪，并且写操作会触发与之相关的副作用。
    如果将一个对象赋值给 ref，那么这个对象将通过 reactive() 转为具有深层次响应式的对象。这也意味着如果对象中包含了嵌套的 ref，它们将被深层地解包。
    若要避免这种深层次的转换，请使用 shallowRef() 来替代
*/
import {ref} from "vue";

export default {
  name: 'App',
  setup(props, context) {
    const count = ref(0)
    const add = () => {
      count.value++
    }
    return {
      count,
      add
    }
  }
}
</script>

<style lang="less"></style>
